let groupData = []

async function rander () {
  const result = await axios({
    url: '/dashboard',
  })
  console.log(result.data.data)
  const data = result.data.data
  // 获取所有月份
  const months = data.year.map(value => value.month)
  // 获取每个月份薪资
  const salaries = data.year.map(value => value.salary)
  // 获取每个薪资阶段人数
  const salaryData = data.salaryData.map(item => {
    return { value: item.b_count + item.g_count, name: item.label }
  })
  // 班级每组薪资 
  const obj = data.groupData
  for (const key in obj) {
    groupData.push(obj[key])
  }
  // 男女薪资分布图
  const boyData = data.salaryData.map(item => {
    return { name: item.label, value: item.b_count }
  })
  const girlData = data.salaryData.map(item => {
    return { name: item.label, value: item.g_count }
  })
  // 班级基本情况
  document.querySelector('[name="salary"]').innerHTML = data.overview.salary
  document.querySelector('[name="student_count"]').innerHTML = data.overview.student_count
  document.querySelector('[name="age"]').innerHTML = data.overview.age
  document.querySelector('[name="group_count"]').innerHTML = data.overview.group_count


  // 全学科薪资走势
  fn1(months, salaries)
  // 班级薪资分布
  fn2(salaryData)
  // 班级每组薪资
  fn3(groupData[0])
  // 男女薪资分布图
  fn4(boyData, girlData)
  // 籍贯分布地图
  fn5()
}
rander()

// 给每个按钮添加点击事件，查看每组薪资
const btns = document.querySelector('#btns')
btns.addEventListener('click', function (e) {
  if (e.target.tagName === 'BUTTON') {
    document.querySelector('.btn-blue').classList.remove('btn-blue')
    e.target.classList.add('btn-blue')

    const index = e.target.dataset.index

    fn3(groupData[index])
  }
})


// 全学科薪资走势
function fn1 (months, salaries) {
  var chartDom = document.getElementById('line')
  var myChart = echarts.init(chartDom)
  var option

  option = {
    color: 'skyblue',
    title: {
      text: '2023全学科薪资走势',
      top: '2%',
      left: '2%'
    },
    xAxis: {
      type: 'category',
      data: months
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: salaries,
        type: 'line',
        smooth: true,
        symbolSize: 10,
        lineStyle: {
          width: 8,
        }
      },
    ],

  }

  option && myChart.setOption(option)
}
// 班级薪资分布
function fn2 (salaryData) {
  var chartDom = document.getElementById('salary')
  var myChart = echarts.init(chartDom)
  var option

  option = {
    title: {
      text: '班级薪资分布',
      top: '5%',
      left: '3%'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '85%',
      left: 'center'
    },
    // 颜色
    color: ['#fda224', '#5097ff', '#3fceff', '#34d39a', 'yellowgreen'],
    series: [
      {
        name: '该薪资人数',
        type: 'pie',
        radius: ['45%', '60%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: salaryData
      }
    ]
  }

  option && myChart.setOption(option)
}
// 班级每组薪资
function fn3 (groupData) {

  const nameList = groupData.map(value => value.name)
  const salaryList = groupData.map(value => value.salary)
  const hope_salaryList = groupData.map(value => value.hope_salary)


  var chartDom = document.getElementById('lines')
  var myChart = echarts.init(chartDom)
  var option

  option = {
    tooltip: {
      trigger: 'axis'
    },

    calculable: true,
    xAxis: [
      {
        type: 'category',
        // prettier-ignore
        data: nameList,
        axisLine: {
          // 线的样式
          lineStyle: {
            type: 'dashed',
            color: '#d4d4d6'
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '期望薪资',
        type: 'bar',
        data: hope_salaryList,
      },
      {
        name: '实际薪资',
        type: 'bar',
        data: salaryList,
      }
    ],
    color: [
      // 渐变
      {
        type: 'bar',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#34d29a' // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#d4f5ea' // 100% 处的颜色
          }
        ],
        global: false // 缺省为 false
      },
      {
        type: 'bar',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#499fed' // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#d8eafb' // 100% 处的颜色
          }
        ],
        global: false // 缺省为 false
      }
    ],
  }

  option && myChart.setOption(option)
}
// 男女薪资分布图
function fn4 (boyData, girlData) {
  var chartDom = document.getElementById('gender')
  var myChart = echarts.init(chartDom)
  var option

  var datas = [boyData, girlData]
  option = {
    title: [{
      text: '男女薪资分布图',
      top: '2%',
      left: '2%'
    }, {
      text: '男生',
      top: '47%',
      left: 'center',
    }, {
      text: '女生',
      top: '87%',
      left: 'center',
    }],
    color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a', 'yellowgreen'],
    tooltip: {
      trigger: 'item'
    },
    series: datas.map(function (data, idx) {
      var top = idx * 40
      return {
        name: '男女薪资人数',
        type: 'pie',
        radius: [45, 60],
        top: top + 15 + '%',
        height: '33.33%',
        left: 'center',
        width: 400,
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1
        },

        labelLine: {
          length: 15,
          length2: 0,
          maxSurfaceAngle: 80
        },
        data: data
      }
    })
  }

  option && myChart.setOption(option)
}
// 籍贯分布地图
function fn5 () {
  var china_chart = echarts.init(document.getElementById('map'))
  //静态的数据，数据的格式和饼图的一致。
  var data = [{
    name: '江苏',
    value: 100
  },
  {
    name: '北京',
    value: 86
  },
  {
    name: '上海',
    value: 68
  },
  {
    name: '重庆',
    value: 123
  },
  {
    name: '河北',
    value: 34
  },
  {
    name: '河南',
    value: 32
  },
  {
    name: '云南',
    value: 160
  },
  {
    name: '辽宁',
    value: 43
  },
  {
    name: '黑龙江',
    value: 181
  },
  {
    name: '湖南',
    value: 24
  },
  {
    name: '安徽',
    value: 33
  },
  {
    name: '山东',
    value: 54
  },
  {
    name: '新疆',
    value: 118
  },
  {
    name: '浙江',
    value: 44
  },
  {
    name: '江西',
    value: 220
  },
  {
    name: '湖北',
    value: 21
  },
  {
    name: '广西',
    value: 30
  },
  {
    name: '甘肃',
    value: 12
  },
  {
    name: '山西',
    value: 32
  },
  {
    name: '内蒙古',
    value: 35
  },
  {
    name: '陕西',
    value: 25
  },
  {
    name: '吉林',
    value: 45
  },
  {
    name: '福建',
    value: 28
  },
  {
    name: '贵州',
    value: 18
  },
  {
    name: '广东',
    value: 37
  },
  {
    name: '青海',
    value: 62
  },
  {
    name: '西藏',
    value: 43
  },
  {
    name: '四川',
    value: 33
  },
  {
    name: '宁夏',
    value: 8
  },
  {
    name: '海南',
    value: 19
  },
  {
    name: '台湾',
    value: 190
  },
  {
    name: '香港',
    value: 11
  },
  {
    name: '澳门',
    value: 10
  }
  ]
  var option = {
    title: {
      text: '中国地图',
    },
    tooltip: {
      // 自定义弹窗
      // formatter: '{a}<br>{b}：{c}',//{a}: 系列中的name的属性值。{b}系列中具体的数据的内容。{c}：内容对应的值,如果存在多个系列。
      //使用函数  将系列中的
      // 鼠标引入省份,不断触发.params 对象.当前省份的信息.
      formatter: function (params) {
        // console.log(params);
        return params.seriesName + "<br>" + params.name + ":" + params.value
      }
    },
    // 视觉映射组件，负责地图的颜色的配置。
    visualMap: [{
      // 组件的类型，连续的
      // type:"continuous",
      // 不连续的
      type: "piecewise",
      // 自定义颜色块区间
      // pieces: [
      //     { min: 201,label:">200",color:"#222" }, 
      //     { min: 101, max: 200, label: '101-200',color:"#666" },
      //     { min: 51, max: 100, label: '51-100',color:"#999" },
      //     { min: 11, max: 50, label: '11-50',color:"#aaa" },
      //     { min: 1, max: 10, label: '1-10',color:"#ccc" },
      //     // 单独的一个值。
      //     { value:0,label:"0",color:"#eee"}    
      // ]
      // 取值的最小值
      min: 0,
      //最大值。
      max: 250,
      itemWidth: 25,
      itemHeight: 15,
      // 组件两端的文本。
      // text:["高","低"],
      // 指定取哪个系列的数据，即哪个系列的 series.data。
      seriesIndex: [0],
      // 组件的颜色的范围。
      inRange: {
        color: ['orange', 'red']
      },
      // 组件的排列方式
      // orient:"horizontal",
      // 默认垂直布局
      orient: "vertical",
    }],
    //地图的核心区域
    geo: {
      //地图的类型
      map: 'china',
      //缩放比例 
      zoom: 1,
      //地图上的文字
      label: {
        show: true
      },
      //高亮选中
      emphasis: {
        label: {
          show: true
        },
        itemStyle: {
          areaColor: 'pink'
        }
      }
    },
    //系列
    series: [{
      name: '中国',
      type: 'map',
      geoIndex: 0,
      data: data
    }]
  }
  //渲染视图
  china_chart.setOption(option)
}